<template>
  <div id="FaultDispatch" class="wrap">
    <!--查询表单-->
    <el-form label-position="left" size="mini" :inline="true" :model="queryForm" label-width='90px' class="query-form">
        <el-form-item label="服开工单号">
            <el-input v-model="queryForm.jobNumber" clearable placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData(1)">查询</el-button>
            <el-button type="primary" @click="clearQuery">清空</el-button>
            <el-button type="primary" @click="diologExcelVisible=true">导出</el-button>
            <el-button type="primary" @click="importExcel">导入</el-button>
            <input type="file" ref="uploadExcel" v-show="false" accept=".xls, .xlsx, .csv" @change="readExcel">
            
        </el-form-item>
        <el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;<a class="text-base" @click='query_show = !query_show; '>更多查询条件<i :class="'iconfont icon-'+query_show"></i></a>
        </el-form-item>
        <div v-show="query_show">
            <div class="input-box">
                <el-form-item label="实际安装人">
                    <el-input v-model="queryForm.username" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="业务类型">
                    <el-input v-model="queryForm.mainCheckList" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="宽带账号">
                    <el-input v-model="queryForm.kdAcount" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="客户姓名">
                    <el-input v-model="queryForm.cusName" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-input v-model="queryForm.payCheck" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="宽带类别">
                    <el-input v-model="queryForm.broadBandCheck" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="queryForm.createTime"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="归档时间">
                    <el-date-picker
                        v-model="queryForm.gdTime"
                        type="daterange"
                        style="width: 230px; margin-right: 30px;"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </el-form-item>
            </div>
        </div>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border  style="width: 100%; max-height: calc( 100% - 100px );" 
        @sort-change="sortChange"  height="calc( 100% - 100px )"
      >
      <el-table-column width="100%" prop="username" sortable="custom" label="实际安装人" fixed></el-table-column>
      <el-table-column width="110px" prop="mainCheckList" sortable="custom" label="业务类型"></el-table-column>
      <el-table-column width="150px" prop="createTime" sortable="custom" label="创建时间"></el-table-column>
      <el-table-column width="100%" prop="name" sortable label="所开服账号"></el-table-column>
      <el-table-column width="100%" prop="jobNumber" sortable="custom" label="服开工单号" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column width="100%" prop="kdAcount" sortable="custom" label="宽带账号" ></el-table-column>
      <el-table-column width="100%" prop="cusName" sortable="custom" label="客户姓名"></el-table-column>
      <el-table-column width="100%" prop="address" sortable="custom" label="客户地址"></el-table-column>
      <el-table-column width="100%" prop="marketingModeCheckList" sortable="custom" label="营销方式"></el-table-column>
      <el-table-column width="100%" prop="SNcode" sortable="custom" label="SN码"></el-table-column>
      <el-table-column width="175px"  prop="MACcode" sortable="custom" label="MAC码"></el-table-column>
      <el-table-column width="175px" prop="MACcode2" sortable="custom" label="MAC码（第二个电视）"></el-table-column>
      <el-table-column width="100%" prop="tel" sortable="custom" label="固话"></el-table-column>
      <el-table-column width="120px" prop="azCost" sortable="custom" label="安装费（元）"></el-table-column>
      <el-table-column width="125px" prop="kdCost" sortable="custom" label="宽带费用（元）"></el-table-column>
      <el-table-column width="110px" prop="equipmentCostCheck" sortable="custom" label="设备费（元）"></el-table-column>
      <el-table-column width="100%" prop="ropeLenth" sortable="custom" label="皮缆（米）"></el-table-column>
      <el-table-column width="100%" prop="fiberLenth" sortable="custom" label="尾纤（条）"></el-table-column>
      <el-table-column width="100%" prop="splitter" sortable="custom" label="分光器"></el-table-column>
      <el-table-column width="100%" prop="payCheck" sortable="custom" label="支付方式"></el-table-column>
      <el-table-column width="100%" prop="waterAcount" sortable="custom" label="流水帐号"></el-table-column>
      <el-table-column width="120px" sortable="custom" label="流水帐号图片">
              <template slot-scope="scope">
                <p v-if="scope.row.imgs" @click="show(scope.row.imgs)" style="cursor: pointer; color: #409EFF;">查看图片</p>
              </template>
            </el-table-column>
      <el-table-column width="100%" prop="broadBandCheck" sortable="custom" label="宽带类别"></el-table-column>
      <el-table-column width="100%" prop="other" sortable="custom" label="备注"></el-table-column>
      <el-table-column width="100%" prop="gdTime"  sortable="custom" label="归档时间"></el-table-column>
      <el-table-column width="100%" prop="zq"  sortable="custom" label="镇区"></el-table-column>
      <!-- <el-table-column sortable="custom" label="操作" width="160px" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span @click="clickAdd(scope.row)" v-if="scope.row.state == '未处理'" style="padding: 4px 6px;color: #409EFF; cursor: pointer;">转故障单</span>
          <span @click="clickAdd(scope.row)" v-if="scope.row.state == '未处理'" style="padding: 4px 6px;color: #409EFF; cursor: pointer;">转咨询单</span>
        </template>
      </el-table-column> -->
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
        :page-size="pageSize"
        @current-change="getData"
        :current-page="currentPage"
        :total="count" style="float: right;">
    </el-pagination>
    <!--导入Excel表-->
    <!-- <el-dialog title="导出Excel表格" :visible.sync="diologInputVisible" @close="closeExcel">
        <input ref="upload"  class="input-img" type="file" accept=".xls, .xlsx">
        <span slot="footer" class="dialog-footer">
            <el-button @click="diologInputVisible = false">取 消</el-button>
            <el-button type="primary" @click="inputExcel">确 定</el-button>
          </span>
     </el-dialog>   -->
    <!--导出选择字段-->
     <el-dialog title="导出选择" :visible.sync="diologExcelVisible" @close="closeExcel">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="installHeader" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city.split('/')[0]}}</el-checkbox>
          </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
            <el-button @click="diologExcelVisible = false">取 消</el-button>
            <el-button type="primary" @click="export2Excel">确 定</el-button>
          </span>
     </el-dialog>   

    <!--新增故障单-->
    <el-dialog title="新增故障单" width="900px" @close="closeAdd" class="dialog dialogAdd" custom-class="custom-dialog"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false' :modal-append-to-body='false' :modal="false">
      <el-form ref="addForm" style="margin-right: 20px;" :model="addForm" :inline="true" :rules="addFormRules" label-position="right" label-width="100px" size="mini">
        <el-form-item label="宽带捆绑号码">
          <el-input v-model="khzh" clearable placeholder="" style="margin-right: 7px;">
          </el-input><el-button type="primary" size="mini" @click="getKhzl">查询</el-button>
        </el-form-item>
        <el-form-item label="客户账号" prop="khzh">
          <el-input v-model="addForm.khzh"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="khxm">
          <el-input v-model="addForm.khxm"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" prop="sex">
          <el-select v-model="addForm.sex" clearable>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户号码" prop="khhm">
          <el-input v-model="addForm.khhm"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="lxrxm">
          <el-input v-model="addForm.lxrxm"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="lxrdh">
          <el-input v-model="addForm.lxrdh"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" prop="khdz">
          <div style="position: relative;">
            <el-input v-show="addForm.khdz1" v-model="addForm.khdz1" style="position: absolute;"></el-input>
            <el-cascader
              :style="addForm.khdz1 ? 'opacity: 0;' :''"
              :options="options2"
              @change="handleItemChange"
              @active-item-change="handleItemChange"
              :props="props"
              v-model="addForm.khdz"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="六级地址" prop="name6">
          <el-input v-model="addForm.name6" style="width: 92px;"></el-input>
        </el-form-item>
        <el-form-item label="七级地址" prop="name7">
          <el-input v-model="addForm.name7" style="width: 92px;"></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="qy" >
          <el-select v-model="addForm.qy" @change="addForm.gswgId = ''">
            <el-option v-for="value in config.qyList" :key="value" :label="value" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属网格" prop="gswgId">
          <el-select v-model="addForm.gswgId" filterable>
            <el-option v-for="wg in getWgList(addForm.qy)" :key="wg.value" :label="wg.label" :value="wg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障单分类" prop="type" >
          <el-select v-model="addForm.type">
            <el-option v-for="value in config.gzTypeList" :key="value" :label="value" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="归属网格" prop="gswg" >
          <el-cascader :options="options" v-model="addForm.gswg"></el-cascader>
        </el-form-item> -->
        <el-form-item label="报障方式" prop="bzfs">
          <el-input v-model="addForm.bzfs"></el-input>
        </el-form-item>
        <el-form-item label="故障类型" prop="gzlx">
          <el-select v-model="addForm.gzlx" clearable>
            <el-option
              v-for="value in config.gzlxList"
              :key="value"
              :label="value"
              :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障描述" prop="gzms">
          <el-input
            type="textarea"
            resize="none"
            :autosize="{ minRows: 3, maxRows: 10}"
            placeholder="请输入故障描述"
            v-model="addForm.gzms">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="add" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <viewer :images="images" @inited="inited" class="viewer" ref="viewer">
      <template slot-scope="scope">
        <img v-show="false" v-for="src in scope.images" :src="src" :key="src">
      </template>
    </viewer>
  </div>
</template>

<script>
// const cityOptions = ['实际安装人','业务类型','创建时间','所开服账号','服开工单号','宽带账号','客户姓名','客户地址','营销方式','SN码','MAC码','MAC码（第二个电视）','固话','安装费（元）',
//     '宽带费用（元）','设备费（元）','皮缆（米）','尾纤（条）','分光器','支付方式','流水帐号','宽带类别','备注','归档时间','镇区'];
const cityOptions = [
  '实际安装人/username','业务类型/mainCheckList','创建时间/createTime','所开服账号/name','服开工单号/jobNumber','宽带账号/kdAcount',
  '客户姓名/cusName','客户地址/address','营销方式/marketingModeCheckList','SN码/SNcode','MAC码/MACcode','MAC码（第二个电视）/MACcode2','固话/tel',
  '安装费（元）/azCost','宽带费用（元）/kdCost','设备费（元）/equipmentCostCheck','皮缆（米）/ropeLenth','尾纤（条）/fiberLenth','分光器/splitter',
  '支付方式/payCheck','流水帐号/waterAcount','宽带类别/broadBandCheck','备注/other','归档时间/gdTime','镇区/zq'
  ];

import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
import XLSX from 'xlsx'
export default {
  name: 'FaultDispatch',
  components: {
    Viewer,
    XLSX
  },
  
  data () {
    return {
      outputs: [],
      // kdAcount: [],
      // zq: [],
      // gdTime: [],
      files: [],
      list: [],
      diologInputVisible: false,
      checkAll: false,
      installHeader: [],
      cities: cityOptions,
      isIndeterminate: true,
      diologExcelVisible: false,
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      loading: true,
      query_show: false,          //  是否显示更多查询
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
      images: [],
    /************************新增故障单********************* */
      addForm: {
        khzh: '',
        khxm: '',
        khhm: '',
        khdz: [],
        lxrxm: '',
        lxrdh: '',
        qy: '',
        gswgId:'',
        zwsfId: '',
        bzfs: '',
        gzlx: '',
        sex: '',
        type: '',
        name6: '',
        name7: '',
      },                //  新增表单
      addFormRules:{
          khzh: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khxm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          khdz: [{ required: true, validator: this.isArrayNull, trigger: 'blur' }],
          lxrxm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          lxrdh: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          name6: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          name7: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          bzfs: [{ required: true, validator: this.isNull, trigger: 'change' }],
          qy: [{ required: true, validator: this.isArrayNull, trigger: 'change' }],
          gswgId: [{ required: true, validator: this.isArrayNull, trigger: 'change' }]
      },//新增校验规则
      khzh: '',         //  新增时搜索
      dialogAddVisible: false,    //  新增模态框
      options: [],      //  区域、网格联动
      options2: [{
        id: this.config.wjdzId + '/' + '湛江' + '/0',
        name: '湛江',
        parentId: null,
        children: []
      }],           //  地址联动
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
    }
  },
  mounted(){
    this.getData(1)
    this.getWg()
  },

  methods: {
    handleCheckAllChange(val) {
        this.installHeader = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
    handleItemChange(val) {
      let length = val.length
      if(length){
        let value = val[length-1]
        let parentId = value.split('/')[0]
        let currentList
        for(var i = 0; i<length; i++){
          let index = val[i].split('/')[2]
          currentList = i == 0 ? this.options2[index] : currentList.children[index]
        }
        if(length == 5){
          this.addForm.khdz1 = ''
          let wgName = currentList.wgName
          if(wgName){
            this.addForm.qy = wgName.substring(0,2)
            let index1 = this.options.findIndex(item => item.value == wgName.substring(0,2))
            if(index1 != -1){
              let index2 = this.options[index1].children.findIndex(item => item.label == wgName)
              if(index2 != -1){
                this.addForm.gswgId = this.options[index1].children[index2].value
              }
            }
          }
        }else{
          this.$post('/api/WjdzController/getChildren', {parentId: parentId}, (data) => {
            let children = []
            if(length == 4){
              data.list.map((item, index) => {
                children.push({
                  id: item.id + '/' + item.name + '/' + index,
                  parentId: item.parentId,
                  name: item.name,
                  wgName: item.wgName,
                  children: null
                })
              })
            }else{
              data.list.map((item, index) => {
                children.push({
                  id: item.id + '/' + item.name + '/' + index,
                  parentId: item.parentId,
                  name: item.name,
                  wgName: item.wgName,
                  children: []
                })
              })
            }
            currentList.children = children
          })
        }
      }
    },

    //  获取表格数据
    getData(val){
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.startLoading()
      this.$post("/api/WxInstallController/getWxInstalls",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    //  清空查询
    clearQuery(){
        this.queryForm = {}
        this.getData(1)
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
       /*******************************导入********************************* */
	    importExcel(){
	      this.$refs.uploadExcel.click()
	    },
	    //表格导入
	    readExcel(e) {
        var XLSX = require('xlsx');
	      var that = this;
	      const files = e.target.files;
	      if(files.length<=0){//如果没有文件
	        return false;
	      }
	      const fileReader = new FileReader();
	      fileReader.onload = (ev) => {
	        try {
              const data = ev.target.result;
	            const workbook = XLSX.read(data, {
                type: 'binary'
	            });
	            const wsname = workbook.SheetNames[0];//取第一张表
              const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容
              console.log(ws)
              
              //  this.kdAcount = []
              //  this.gdTime = []
              //  this.zq = []
              this.outputs = []//清空接收数据
              ws.map(item => {
                if(item["镇区"]!=null){
                  let obj = {
                    kdAcount: item["宽带账号"],
                    zq: item["镇区"],
                    gdTime: item["归档时间"],
                  }
                  this.outputs.push(obj)
                } 
              })
              console.log(this.outputs)
              //  console.log(this.kdAcount)
              // console.log(this.zq)
              //   console.log(this.gdTime)
                let params = {}
               params.outputs=this.outputs
                //params.kdAcount=this.kdAcount
                //params.zq=this.zq
                //params.gdTime=this.gdTime
               this.$post("/api/WxIntstallController/gd",params,() => {
                  this.$message.success("导入成功！")
               }) 

	            // this.outputs = [];//清空接收数据
	            // let staffDict = {}
	            // this.allStaff.map(item => {
	            //   staffDict[item.userName] = item.cname + '/' + item.userName
	            // })
	            // ws.map(item => {
	            //   let ownerId = (item["拥有者"] || '').trim()
	            //   let ownerCname = staffDict[ownerId] || ''
	            //   let sheetData = {
	            //     name: (item["客户名称"] || '').trim(),
	            //     ownerCname: ownerCname,
	            //     phone: (item["电话"] || '').trim(),
	            //     mail: (item["邮箱"] || '').trim(),
	            //     fax: (item["传真"] || '').trim(),
	            //     area: item["国家"] && item["省"] && item["市"] ? [item["国家"],item["省"],item["市"]] : [],
	            //     address: (item["公司地址"] || '').trim(),
	            //     zipCode: (item["邮编"] || '').trim(),
	            //     cusSource: (item["客户来源"] || '').trim(),
	            //     cusType: (item["客户类型"] || '').trim(),
	            //     industry: (item["所属行业"] || '').trim(),
	            //     cusSize: (item["客户规模"] || '').trim(),
	            //     // name: item["纳税识别号"],
	            //     // name: item["开票地址"],
	            //     // name: item["开票电话"],
	            //     // name: item["开户银行"],
	            //     // name: item["开户账号"],
	            //     followStatus: (item["跟进状态"] || '').trim(),
	            //   }
	            //   this.outputs.push(sheetData);
	            // })
	            // console.log(this.outputs)
	            // this.$refs.uploadExcel.value = '';
	            // this.dialogImportVisible = true
	        } catch (e) {
	          return false;
	        }
	      };
	      fileReader.readAsBinaryString(files[0]);
	    },
    /***********************导入Excel******************* */
    inputExcel(){
      // let params = {}
      // params['file'] = files[0]
      // console.log(this.files)
      // console.log(params)
      //   this.$post("/api/WxInstallController/inputExcel",params,(data) => {
      //     this.$message.success("导入成功！")
      //   })
    },
     /***********************导出******************* */
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel() {
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = 1
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      let tHeader = [];
      let filterVal = [];
      this.installHeader.map((item) => {
         tHeader.push(item.split("/")[0])
         filterVal.push(item.split('/')[1])
      })
      this.$post("/api/WxInstallController/getWxInstalls",params, (data) => {
        let tableData = data.list;
        require.ensure([], () => {
  　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
  　　　　const data = this.formatJson(filterVal, tableData);
  　　　　export_json_to_excel(tHeader, data, '安装单');
  　　　})
      })
　  },
  /******************新增***************** */
    //  获取网格
    getWg(){
      let params = {}
      params.currentPage = 1
      params.queryForm = {}
      params.prop = 'name'
      params.order = 1
      this.$post("/api/WgController/getList",params, (data) => {
        let options = []
        let qyList = this.config.qyList
        qyList.map(item => {
          options.push({
            value: item,
            label: item,
            children: []
          })
        })
        data.list.map(item => {
          let index = qyList.indexOf(item.qy)
          if(index != -1){
            options[index].children.push({
              value: item.name + '/' + item.id,
              label: item.name,
            })
          }
        })
        this.options = options
      })
    },
    getWgList(qy){
      let wgList = []
      if(qy){
        let index = this.options.findIndex(item => item.value == qy)
        if(index != -1){
          wgList = this.options[index].children
        }
      }
      return wgList
    },
    //  获取客户资料
    getKhzl(){
      this.$post("/api/KhzlController/getKhzl", {id: this.khzh}, (data) => {
        if(data.khzl){
          this.addForm.khzh = data.khzl.khzh
          this.addForm.khxm = data.khzl.khxm
          this.addForm.khhm = data.khzl.khhm
          this.addForm.khdz1 = data.khzl.name1 + data.khzl.name2 + data.khzl.name3 + data.khzl.name4 + data.khzl.name5
          this.addForm.khdz = []
          this.addForm.name1 = data.khzl.name1
          this.addForm.name2 = data.khzl.name2
          this.addForm.name3 = data.khzl.name3
          this.addForm.name4 = data.khzl.name4
          this.addForm.name5 = data.khzl.name5
          this.addForm.name6 = data.khzl.name6
          this.addForm.name7 = data.khzl.name7
          this.addForm.qy = data.khzl.gswg.substring(0,2)
          this.addForm.gswgId = data.khzl.gswg + '/' + data.khzl.gswgId
          // this.addForm.khdz = data.khzl.khdz
        }else{
          this.$message.error("当前客户不存在")
        }
      })
    },
    // 打开新增模态框
    openAdd(){
      
    },
    //  转故障单
    clickAdd(row){
      this.dialogAddVisible = true
      console.log(row)
      Object.keys(row).forEach(key => {
        this.addForm[key] = row[key]
      })
      this.addForm.khdz = []
      this.addForm.bzfs = '微信报障'
      this.addForm.wxId = row.id
    },
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
      this.khzh = ''
    },
    closeExcel(){
      this.installHeader = []
    },
    // 确定新增
    add(){
      console.log(this.addForm)
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let addForm = this.deepClone(this.addForm)
          addForm.gswg = addForm.gswgId.split("/")[0]
          addForm.gswgId = addForm.gswgId.split("/")[1]
          if(!addForm.name1){
            addForm.khdz.map((item, index) => {
              addForm['name' + (index + 1)] = item.split("/")[1]
            })
          }
          addForm.fromWhere = '微信'
          // if(addForm.zwsfId){
          //   addForm.zwsfCname = addForm.zwsfId.split('/')[1]
          //   addForm.zwsfId = addForm.zwsfId.split('/')[0]
          // }
          this.$post("/api/GzdController/addOne", addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
          })
        }
      })
    },
    
    //  获取客户地址
    getKhdz(item){
      let khdz = ''
      for(var i=1; i<8; i++){
        khdz += item['name' + i]
      }
      return khdz
    },
    //  查看图片
    inited (viewer) {
      this.$viewer = viewer
    },
    show (list) {
      let images = []
      list.map(item => {
        images.push(this.config.httpHeadUrl + item)
      })
      this.images = images
      setTimeout(() => {
          this.$viewer.show()
      }, 0)
    },
  
  }
}
</script>

<style lang="less" scoped>
  .wrap{
    height: 100%;
  }
  .custom-dialog{
    margin-top: 0 !important;
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }

  }
  .gzd-detail{
    td{
      vertical-align: top;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
    #FaultDispatch .gzdxq-dialog{
      height: 74vh;
      .el-dialog__body{
        padding-top: 0;
        height: calc(100% - 34px);
        .el-tabs{
          height: 100%;
          .el-tabs__content{
            height: calc(100% - 40px);
            overflow: auto;
          }
        }
      }
    }
</style>

